<template>
    <div class="my">
        <div class="head">
        </div>

        <div class="body" style="overflow-y: auto;">
            <router-view></router-view>
        </div>


        <div class="main">
            <router-link to="/main/home" class="main-item">
                <div class="icon-container">
                    <i class="i1"></i>
                    首页
                </div>
            </router-link>
            <router-link to="/main/services" class="main-item">
                <div class="icon-container">
                    <i class="i2"></i>
                    全部服务
                </div>
            </router-link>
            <router-link to="/main/order" class="main-item">
                <div class="icon-container">
                    <i class="i3"></i>
                    订单
                </div>
            </router-link>
            <router-link to="/main/user" class="main-item">
                <div class="icon-container">
                    <i class="i4"></i>
                    我的
                </div>
            </router-link>
        </div>
    </div>

</template>
<script setup>
</script>
<style scoped>
.my {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    position: relative;
    clear: both;
}

.head {
    margin: 0;
    padding: 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    clear: both;
    background-color: #f3f8fe;
    text-align: center;
    z-index: 1000;
}

.main-item {
    float: left;
    width: 25%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.main-item div {
    text-align: center;
}

.main {
    margin: 0;
    padding: 0;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    float: left;
    clear: both;
    background-color: #f3f8fe;

}
.icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.body {
    height:100%;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 50px;
}

.main div {
    text-align: center;

}

.i1{
    width: 20px;
    height: 20px;
    background: url('https://massage-booking.oss-cn-beijing.aliyuncs.com/re.jpg') no-repeat center center/cover;
}
.i2{
    width: 20px;
    height: 20px;
   background: url('https://massage-booking.oss-cn-beijing.aliyuncs.com/tui.jpg') no-repeat center center/cover;
}
.i3{
    width: 20px;
    height: 20px;
   background: url('https://massage-booking.oss-cn-beijing.aliyuncs.com/xiao.jpg') no-repeat center center/cover;
}
.i4{
    width: 20px;
    height: 20px;
   background: url('https://massage-booking.oss-cn-beijing.aliyuncs.com/wo.jpg') no-repeat center center/cover;
}


</style>